import { Input, NavBar, TextArea } from 'antd-mobile'

import styles from './index.module.scss'

type PropsType = {
  ClosePopup: () => void
  type: '' | 'name' | 'intro'
}

const EditInput = (props: PropsType) => {
  return (
    <div className={styles.root}>
      <NavBar
        className="navbar"
        right={<span className="commit-btn">提交</span>}
        onBack={() => {
          props.ClosePopup()
        }}
      >
        编辑{props.type === 'name' ? '昵称' : '简介'}
      </NavBar>

      <div className="edit-input-content">
        <h3>{props.type === 'name' ? '昵称' : '简介'}</h3>
        {props.type === 'name' ? (
        <div className="input-wrap">
          <Input placeholder="请输入昵称" />
        </div>
        ) : (
        <TextArea placeholder="请输入简介" className='textarea' maxLength={100} showCount></TextArea>
        )}
      </div>
    </div>
  )
}

export default EditInput
